<template>
  <div class="history">
    <list>
      <template v-for="item in items">
        <item>
          <item-media>
            <img :src="item.avatar" />
          </item-media>
          <item-content>
            <item-title-row>
              <item-title>{{item.roomName}}</item-title>
              <item-title-after>
                <a class="icon-button" href="javascript:;" v-on:click="watch(item.platform, item.roomId, $index)" title="监控">
                  <img src="../../assets/ic_watch_ing.svg" v-if="item.isWatch"/>
                  <img src="../../assets/ic_watch.svg" v-else/>
                </a>
                <a class="icon-button" href="javascript:;" v-on:click="showDel(item.platform, item.roomId, $index)" title="删除">
                  <img src="../../assets/ic_del.svg"/>
                </a>
              </item-title-after>
            </item-title-row>
            <item-sub-title>
              上次监控: {{item.date}}
            </item-sub-title>
          </item-content>
        </item>
      </template>
    </list>
    <confirm title="删除提示" msg="确定要删除该条监控记录？" :show-icon="false" :show.sync="confirm.show" :on-sure="onDelSure"></confirm>
    <toast v-for="toast in toasts" :text="toast.text" :loading="toast.loading" :icon="toast.icon" :center="toast.center"></toast>
  </div>
</template>
<script>
import top from '../app-components/top'
import { getToasts, getDataHistoryRooms } from '../../vuex/getters'
import { addRoom, getHistoryRooms, removeHistoryRoom } from '../../vuex/actions'
export default {
  vuex: {
    getters: {
      toasts: getToasts,
      items: getDataHistoryRooms
    },
    actions: {
      addRoom,
      getRooms: getHistoryRooms,
      remove: removeHistoryRoom
    }
  },
  data () {
    return {
      confirm: {
        show: false,
        platform: '',
        roomId: '',
        index: -1
      }
    }
  },
  attached () {
    this.getRooms()
  },
  methods: {
    back: function () {
      this.$router.go({ name: 'home' })
    },
    watch: function (platform, roomId, index) {
      this.addRoom(platform, roomId, (code) => {
        if (code ===0) {
          this.items[index].isWatch = true
        }
      })
    },
    showDel: function (platform, roomId, index) {
      this.confirm.show = true
      this.confirm.platform = platform
      this.confirm.roomId = roomId
      this.confirm.index = index
    },
    onDelSure: function () {
      this.confirm.show = false
      this.remove(this.confirm.platform.concat('_').concat(this.confirm.roomId), this.confirm.index)
    }
  },
  components: {
    top
  }
}
</script>

<style lang="less">
.history {
  margin-top: 16px;
  .item-sub-title{
    font-size: 12px;
    color: #eb4f38
  }
}
</style>
